<?php include "header.php" ?>
<body onload="getTableProductManager(1); getPage();">
<div id="wrapper">

    <?php include "main.php" ?>

    <div id="page-wrapper">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Quản lý sản phẩm
                        </h1>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-dashboard"></i>  <a href="<?php echo base_url() ?>admin/dashboard">Dashboard</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-table"></i> <a href="<?php echo base_url() ?>admin/product">Quản Lý Sản Phẩm</a>
                            </li>
                            <li class="pull-right">
                                <button class="btn btn-primary btn-xs" onClick="emptyProductAdd();"><span class="glyphicon glyphicon-plus"></span> Thêm Mới</button>
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="table-responsive" id="divTableProductManager"></div>
                <div class="row" id="pageAdminProduct"></div>
            </div>
    </div>
</div>

<div class="row light" id="lightCreateProduct" style="width: 70%; height: inherit; left: 24%; top: 11%;">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Thêm Mới Sản Phẩm</h3>
        </div>
        <div class="panel-body">
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3">Danh mục tạo sản phẩm:</div>
                <div class="col-lg-8" id="divSelectedCat1" style="height: 120px; overflow: auto; border: 1px solid deepskyblue; padding-top: 5px;"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3">Danh mục đã chọn:</div>
                <div class="col-lg-8" id="divSelectedCat2" style="color: blue; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Tên sản phẩm:</span></div>
                <div class="col-lg-8"><input id="txtProductName" class="form-control" type="text"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mã sản phẩm:</span></div>
                <div class="col-lg-8"><input id="txtProductCode" class="form-control" type="text"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Giá:</span></div>
                <div class="col-lg-8">
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>10ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtMoney1" class="form-control" type="text" value="0" onkeyup="moneyString(this.id, 'divMoney1')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divMoney1" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>30ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtMoney2" class="form-control" type="text" value="0" onkeyup="moneyString(this.id, 'divMoney2')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divMoney2" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>50ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtMoney3" class="form-control" type="text" value="0" onkeyup="moneyString(this.id, 'divMoney3')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divMoney3" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>100ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtMoney4" class="form-control" type="text" value="0" onkeyup="moneyString(this.id, 'divMoney4')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divMoney4" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            <span><b>Đơn vị tiền tệ</b></span>
                        </div>
                        <div class="col-lg-9">
                            <select id="slUnit" class="form-control" style="width: 20%" onchange="changeCurrency();">
                                <option value="VND">VND</option>
                                <option value="USD">USD</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mô tả:</span></div>
                <div class="col-lg-8"><textarea id="txtSpec" class="form-control" type="text" value="0"></textarea></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"><span>Tải hình ảnh:</span></div>
                <div class="col-lg-8">
                    <div class="row" id="imgPreviewProduct"></div>
                    <form id="frmUploadProduct" action="<?php echo base_url() ?>admin_product/upload" method="POST" enctype="multipart/form-data">
                        <input class="form-control" type="file" name="productFile[]" onclick="$('#uploadProduct').html('');" multiple>
                        <input type="submit" name="submit" value="Upload" class="form-control btn btn-success" onclick="fileMultiUpload(this.form, '<?php echo base_url() ?>admin_product/upload', 'uploadProduct', 'imgPreviewProduct'); return false;"/>
                    </form>
                    <div id="uploadProduct"></div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"><span>Tài liệu & Video:</span></div>
                <div class="col-lg-8"><textarea name="txtDocuments" id="txtDocuments"></textarea></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mô tả chi tiết:</span></div>
                <div class="col-lg-8"><textarea name="txtDescription" id="txtDescription"></textarea></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"></div>
                <div class="col-lg-8">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckboxCreateAdminPro" checked> Hiển thị
                    </label>
                </div>
            </div>
            <div class="row" style="text-align: center; margin: 5px">
                <input type="hidden" id="hiddenCategoryProduct">
                <input type="button" style="margin: 5px" class="btn btn-success" value="Tạo sản phẩm" onclick="createNewProduct()">
                <input type="button" style="margin: 5px" class="btn btn-success" value="Đóng cửa sổ" onClick="lightbox_close('lightCreateProduct', 'fadeCreateProduct');">
                <input type="button" style="margin: 5px" class="btn btn-success" value="Xóa thông tin đã điền" onClick="emptyData();">
            </div>
        </div>
    </div>
</div>
<div class="row-fluid fade" id="fadeCreateProduct" onClick="lightbox_close('lightCreateProduct', 'fadeCreateProduct');"></div>

<script>
    function getTableProductManager(i){
        var url = "<?php echo base_url() ?>";
        $('#divTableProductManager').load(url+"admin_product/getTableProductManager/"+i);
    }

    function getCategoryNews(id){
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"admin_product/getAddParentCategory/"+id,
            success: function(x){
//                alert(x);
                $('#divSelectedCat1').html(x);
            }
        });
    }

    function getSubCategoryNews(id){
        var id = id;
        //alert(id);
        $('#hiddenCategoryProduct').val(id);
        if(id != '0'){
            var url = "<?php echo base_url() ?>";
            var dataString = "id="+id;
            $.ajax({
                type: "POST",
                url: url+"admin_category/getSubCategoryNews",
                data: dataString,
                success: function(x){
                    //alert(x);
                    $('#divSelectedCat2').html(x);
                }
            });
        }
        else{
            $('#divSelectedCat2').html("");
        }
    }
</script>

<script>
    function createNewProduct(){
        var productName = $('#txtProductName').val();
        var productCode = $('#txtProductCode').val();
        var productPrice1 = $('#txtMoney1').val();
        var productPrice2 = $('#txtMoney2').val();
        var productPrice3 = $('#txtMoney3').val();
        var productPrice4 = $('#txtMoney4').val();
        var priceUnit = $('#slUnit').val();
        var specifications = $('#txtSpec').val();
        var documents = CKEDITOR.instances.txtDocuments.getData();
        var description = CKEDITOR.instances.txtDescription.getData();
        var subCategoryID = $("#hiddenCategoryProduct").val();

        var active = 1;
        if(!$('#inlineCheckboxCreateAdminPro').is(':checked') ){ //kiem tra neu checkbox khong duoc check
            active = 0;
        }

        var url = "<?php echo base_url() ?>";
        var dataString = "productName="+productName+"&productCode="+productCode+"&productPrice1="+productPrice1+"&productPrice2="+productPrice2+"&productPrice3="+productPrice3+"&productPrice4="+productPrice4
            +"&priceUnit="+priceUnit+"&specifications="+specifications+"&documents="+documents+"&description="+description+"&subCategoryID="+subCategoryID+"&active="+active;
//        alert(dataString);

        if(subCategoryID == '' || productName == '' || productCode == '' || productPrice1 == '' || productPrice2 == '' || productPrice3 == '' || productPrice4 == '' || specifications == '' || description == ''){
            alert("Các thông đánh dấu * là các thông tin bắc buộc!");
        }
        else{
            $.ajax({
                type: "POST",
                url: url+"admin_product/insertNewProduct",
                data: dataString,
                success: function(x){
//                    alert(x);
                    if(x == 0){
                        alert("Tạo sản phẩm thành công!");
                        lightbox_close('lightCreateProduct', 'fadeCreateProduct');
                        getTableProductManager(1);
                        getPage();
                    }
                    else{
                        alert(x);
                    }
                }
            });
        }
    }
</script>

<script>
    function moneyString(id, div){
        var n = parseInt($('#'+id).val().replace(/\D/g,''),10);
        var unit = $('#slUnit').val();
        if(isNaN(n)){
            n = 0;
        }
        $('#'+div).html(""+ n.toLocaleString() + " "+unit);
    }
</script>

<script>
    function emptyProductAdd(){
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"admin_product/emptyImageAdd",
            success: function(x){
//                alert(x);
                if(x == ''){
                    $('#uploadProduct').html("Chọn hình ảnh để upload...");
                    $('#imgPreviewProduct').html('');

                    $('#frmUploadProduct')[0].reset();

                    getCategoryNews(0);
                    lightbox_open('lightCreateProduct', 'fadeCreateProduct');
                }
                else{
                    alert("Xin vui lòng tải lại trình duyệt và thử lại...");
                }
            }
        });
    }

    function emptyData(){
        $('#txtProductName').val('');
        $('#txtProductCode').val('');
        $('#txtMoney').val('0');
        $('#slUnit').val('VND');
        $('#txtSpec').val('');
        CKEDITOR.instances.txtDocuments.setData('');
        CKEDITOR.instances.txtDescription.setData('');
        $("#hiddenCategoryProduct").val('');
        $('#divSelectedCat2').html('');
        $('#imgPreviewProduct').html('');
        $('#divMoney').html("0 VND");
        $('#frmUploadProduct')[0].reset();
        $('#inlineCheckboxCreateAdminPro').prop('checked', true);
        getCategoryNews(0);
    }

    function changeCurrency(){
        moneyString('txtMoney1', 'divMoney1');
        moneyString('txtMoney2', 'divMoney2');
        moneyString('txtMoney3', 'divMoney3');
        moneyString('txtMoney4', 'divMoney4');
    }
</script>

<script>
    function getPage(){
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"admin_product/getPage",
            success: function(x){
                //alert(x);
                $('#pageAdminProduct').html(x);
            }
        });
    }
</script>

<script>
    CKEDITOR.replace( 'txtDocuments' );
    CKEDITOR.replace( 'txtDescription' );
</script>

<?php include "footer.php" ?>

</body>

</html>